<template>
  <div>
    <div>
      <van-search
        @click="$router.push('/home/SearchPopup')"
        v-model="value"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="flex">
      <!-- 左侧边栏 -->
      <div class="slide_nav">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            @click="slide(v.id)"
            :title="v.name"
            v-for="(v, k) in TypeList"
            :key="k"
          />
        </van-sidebar>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <!-- 上边图片 -->
        <img class="top_img" :src="currentCategory.banner_url" alt="" />
        <h5>{{ currentCategory.name }}</h5>
        <!-- 下边小图标 -->
        <div class="right_bottom">
          <h3>{{ currentCategory.name }}</h3>
          <van-grid :column-num="3">
            <van-grid-item
              v-for="(v, k) in subCategoryList"
              :key="k"
              :icon="v.wap_banner_url"
              :text="v.name"
            />
          </van-grid>
        </div>
      </div>
    </div>
    <!-- 底部导航 -->
    <apptabbar />
  </div>
</template>

<script>
import apptabbar from "@/components/AppTabbar";
import { GetTypeList, GetCurrentData } from "@/request/api";
export default {
  data() {
    return {
      activeKey: 0,
      value: "",
      TypeList: "", //左侧边栏
      id: "",
      DetailList: "",
      currentCategory: [], //分类页
      subCategoryList: "", //下面小图标
    };
  },
  components: {
    apptabbar,
  },
  methods: {
    // 获取当前页数据
    slide(id) {
      // console.log(123);
      GetCurrentData({ id: id })
        .then((res) => {
          // console.log(res);
          let { currentCategory } = res.data;
          this.currentCategory = currentCategory;
          let { subCategoryList } = res.data.currentCategory;
          this.subCategoryList = subCategoryList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    // 获取左侧菜单数据
    GetTypeList()
      .then((res) => {
        let { categoryList, currentCategory } = res.data;
        // 第一次进页面显示数据
        this.currentCategory = currentCategory;
        this.TypeList = categoryList;
        // console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
    GetCurrentData({ id: 1005000 }) //居家id
      .then((res) => {
        // console.log(res);
        let { currentCategory } = res.data;
        this.currentCategory = currentCategory;
        this.subCategoryList = currentCategory.subCategoryList;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="less">
.flex {
  display: flex;
  justify-content: space-between;
}
.right {
  width: 2.7rem;
  height: 1.4rem;
  margin-right: 0.1rem;
  // border: 1px solid red;
  position: relative;
  // background-color: red;
  .top_img {
    width: 2.7rem;
    height: 1.4rem;
    border-radius: 0.05rem;
    box-shadow: 0 0 6px #000;
    filter: brightness(0.5);
  }
  h5 {
    width: 100%;
    color: #fff;
    position: absolute;
    top: 48%;
    left: 0.05rem;
    z-index: 222;
    text-align: center;
    font-size: 0.14rem;
  }
}
.right_bottom {
  h3 {
    width: 35%;
    height: 0.4rem;
    background-color: #fff;
    // position: absolute;
    margin: auto;
    line-height: 0.4rem;
    text-align: center;
    color: #000;
  }
}
</style>